<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>
		<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="729"
			width="375" compressSize="2097152" :compress="true" :showPreview="false" />
		<!-- <image class="myCodeImg" :src="myCodeImg"></image> -->
		<view class="myPages__Bodys" :style="{height: `calc(100vh - ${search.top+search.height+10}px)`}">
			<image class="myPages__BodysBj" src="/static/images/erwBj.png"></image>
			<view class="myPages__BodysConterBox">
				<view class="myPages__BodysConterBoxNameBox">

					<view class="myPages__BodysConterBoxNameImg">
						<image :src="user.avatar"></image>
					</view>
					<view class="myPages__BodysConterBoxNameBoxnickname">
						{{user.nickname}}
					</view>
				</view>
				<image class="myCodeImg" :src="myCodeImg"></image>
				<view class="myPages__BodysConterBoxNameBoxSao">扫一扫</view>
				<view class="myPages__BodysConterBoxNameBoxButtom" @click="baocun">保存拼表多推荐码</view>
			</view>
		</view>

	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {

			return {
				title: '我的二维码',
				myCodeImg: '',
				lists: []
			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.myCodeImg = oprtion.referrerQrcode;



		},
		onReady() {
			// let query = uni.createSelectorQuery();
			// query.select('.myPages__Bodys').boundingClientRect(res => {
			// 	console.log('res----->',res)
			// 	let myHeight = res.height;
			// 	width: 590rpx;
			// 	height: 780rpx;

			// this.lists= 

			// }).exec();
			let avatar = this.user.avatar;
			let nacik = this.user.nickname.length > 3 ? `${this.user.nickname.substring(0,4)}...` : this.user.nickname;
			let jianItem = nacik.length == 3 ? 13 : nacik.length == 2 ? 18 : nacik.length == 1 ? 20+4 : 0;
		
			this.lists = [
				{
					type: 'image',
					content: '/static/images/erwBj.png',
					width: 375,
					height: 729,
					x: 0,
					y: 0,
				},
				{
					type: 'image',
					content: '/static/images/smallBj.png',
					width: 295,
					height: 390,
					x: 40,
					y: 125,
				},
				
				{
					type: 'image',
					content: avatar,
					width: 52,
					height: 52,
					x: 161,
					y: 173,
					arc: true,
					arcX: 187,
					arcY: 173,
					arcR: 26,
				},
				{
					type: 'text',
					content: nacik,
					x: 155 + jianItem,
				    y: 249,
					color: '#2B2B33',
					size: 15,
				},
				{
					type: 'image',
					content: this.myCodeImg,
					width: 152,
					height: 152,
					x: 112,
					y: 266,
				},
				{
					type: 'text',
					content: '扫一扫',
					x: 162+8,
					y: 266+152+35,
					color: '#7B7D8D',
					size: 12,
				}
			]

		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			},

		},
		methods: {
			_canvasImage(e) {
				// .replace("http:","https:")
				console.log('eeee---->', e)
				// uni.downloadFile({
				// 	url: e, //图片地址
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
							// console.log(res.tempFilePath)
					uni.saveImageToPhotosAlbum({
						filePath: e,
						success: function() {
							uni.hideLoading();
							uni.showToast({
								title: "保存成功",
								icon: "none"
							});
						},
						fail: function() {
							uni.hideLoading();
							uni.showToast({
								title: "保存失败",
								icon: "none"
							});
						}
					});
				// 		}
				// 	}
				// })

			},
			baocun() {
				this.$nextTick(() => {
					this.$refs.mosoweCanvasComponents.createCanvas();


				})
				
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},

		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #FFFFFF;
		box-sizing: border-box;

		.myPages__Bodys {
			width: 100%;
			position: relative;
		}

		.myPages__BodysConterBoxNameBox {
			display: flex;
			flex-direction: column;
			align-items: center;


		}

		.myPages__BodysConterBoxNameBoxButtom {
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: #F44B5B;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFFFFF;
		}


		.myPages__BodysConterBoxNameBoxSao {
			color: #7B7D8D;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			margin: 40rpx auto;
			text-align: center;
		}

		.myPages__BodysConterBoxNameImg {
			width: 106rpx;
			height: 106rpx;
			border-radius: 50%;
			border: 4rpx solid #FFFFFF;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.myPages__BodysConterBoxNameBoxnickname {
			width: 100%;
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			text-align: center;
			line-height: 40rpx;
			color: #2B2B33;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-top: 12rpx;
			margin-bottom: 40rpx;
		}


		.myPages__BodysConterBox {
			width: 590rpx;
			height: 780rpx;
			border-radius: 15rpx;
			overflow: hidden;
			position: relative;
			padding: 32rpx;
			box-sizing: border-box;
			margin: 0 auto;
			top: 15%;
			background: url('/static/images/smallBj.png') 0 0 no-repeat;
			background-size: 100%;
		}

		.myPages__BodysConterBoxImg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.myPages__BodysBj {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.myCodeImg {
			width: 304rpx;
			height: 304rpx;
			margin: 0 auto;
			display: inherit;
			// transform: translate(-50%, -50%);
		}

	}
</style>
